<template>
  <div id="login">
    <h2>登录界面</h2>

    <label for="username">账号：<input type="text" v-model="username" /></label>
    <br />
    <label for="password">密码： <input type="password" v-model="password" /></label>
    <br />
    <br>
    <input type="button" value="登录" @click="logins" />
      <router-link to="/regirest" class="link">没有账号去注册</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      users: [
        {
          id: 1,
          uName: "UU",
          pwd: "123",
        },
        {
          id: 2,
          uName: "admin",
          pwd: "123",
        },
      ],
    };
  },
  methods: {
    logins() {
      for (let item of this.users) {
        if (this.username == item.uName && this.password == item.pwd) {
          console.log("登陆成功");
          this.$router.push("/users/" + item.id);
          break;
        } else {
          console.log("账号或密码有误");
        }
      }
    },
  },
};
</script>

<style>
#login {
  margin: 80px auto;
}
.link{
  margin-left: 30px;
  font-size: 15px;
  color: chartreuse;
}
</style>